@import "_reset.less";

html{ font-size: 312.5%; }
@media screen and (max-width:359px) and (orientation:portrait) {
    html { font-size: 266.67%; }
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 300%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 320%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 333.33%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
   html{ font-size:400%;}
}
@media screen and (min-width:640px) and (orientation:portrait){
   html{ font-size:533.33%;}
}

a.btn {
  display : block;
}

body {
  overflow-x : hidden;
  background : #000 url(../img/bg.jpg) center top repeat;
  background-size : 100% auto;

  * {
    background-size : 100% 100% !important;
  }
}

.share-pic {
  display  : block;
  position : absolute;
  width    : 7.5rem;
  height   : auto;
  left     : -20rem;
  top      : 0;
}

.brand-area {
  overflow : hidden;
  position : relative;
  width    : 100%;
  height   : 2.2rem;
  margin   : 0;
  padding  : 0;

  .logos {
    position    : absolute;
    width       : 7.5rem;
    height      : 1rem;
    top         : 0.4rem;
    left        : 50%;
    margin-left : -3.75rem;
    background  : url(../img/logos.png);
  }

  .line {
    position    : absolute;
    width       : 1px;
    top         : 0.35rem;
    bottom      : 0.35rem;
    left        : 50%;
    margin-left : 0.8rem;
    background  : #a29dad;
  }

  .brand-text {
    position    : absolute;
    width       : 4rem;
    height      : 0.35rem;
    bottom      : 0.32rem;
    left        : 50%;
    line-height : 0.25rem;
    font-size   : 0.2rem;
    color       : #04193c;
    text-align  : center;

    &.brand-text1 {
      margin-left : -3.54rem;
    }
    &.brand-text2 {
      margin-left : 0.2rem;
    }
  }
}

.section-title {
  position     : relative;
  height       : 1rem;
  margin       : 0;
  padding      : 0;
  padding-left : 0.3rem;
  line-height  : 1rem;
  font-size    : 0.42rem;
  color        : #fff;
  text-align   : left;
  font-weight  : bold;
  background   : #414a57;
}

.back-btn {
  position        : relative;
  width           : 2.04rem;
  height          : 0.72rem;
  margin          : 0.1rem auto 0.5rem;
  line-height     : 0.72rem;
  font-size       : 0.36rem;
  color           : #04193c;
  text-align      : center;
  text-decoration : none;
  background      : #88bf57;
  border-radius   : 0.36rem;
}

.page {
  display : none;
}

.page-home {

  .slogan {
    box-sizing    : border-box;
    position      : relative;
    width         : 6.9rem;
    margin        : 0 auto;
    margin-bottom : 0.3rem;
    padding       : 0.15rem 0;
    line-height   : 0.4rem;
    font-size     : 0.28rem;
    color         : #04193c;
    text-align    : center;
    border        : 1px solid #636a7a;
    border-radius : 0.1rem;

    strong {
      font-size   : 0.3rem;
      color       : #9e5a08;
      font-weight : normal;
    }

    .tc-btn {
      box-sizing    : border-box;
      position      : absolute;
      z-index       : 1;
      width         : 1.5rem;
      height        : 0.54rem;
      right         : 0;
      bottom        : -1.08rem;
      line-height   : 0.54rem;
      font-size     : 0.3rem;
      color         : #04193c;
      text-align    : center;
      background    : #88bf57;
      border-radius : 0.27rem;
    }
  }

  .section-list {
    box-sizing : border-box;
    position   : relative;
    width      : 6.9rem;
    margin     : 0 auto;

    li {
      position : relative;
      padding  : 0.3rem 0 0.3rem 2.2rem;
      border-bottom : 1px solid #6c7481;
    }

    .avatar {
      display    : block;
      position   : absolute;
      width      : 2rem;
      height     : 2rem;
      left       : -0.15rem;
      top        : 50%;
      margin-top : -1rem;
    }

    .hat {
      position   : absolute;
      width      : 0.93rem;
      height     : 0.99rem;
      left       : 1.2rem;
      top        : 50%;
      margin-top : -1.24rem;
      background : url(../img/avatar-hat.png);
    }

    .info-area {
      position : relative;
      margin   : 0;
      padding  : 0.25rem 0;

      .item {
        position     : relative;
        margin       : 0;
        padding      : 0;
        padding-left : 1.2rem;
        line-height  : 0.5rem;
        font-size    : 0.3rem;
        color        : #04193c;
        text-align   : left;

        .label {
          position    : absolute;
          width       : 1.2rem;
          height      : 0.5rem;
          left        : 0;
          top         : 0;
          font-weight : bold;
        }
      }
    }

    .btn-area {
      position : relative;
      height   : 0.5rem;
      margin   : 0;
      padding  : 0.15rem 0 0.1rem 0;

      .btn {
        float         : left;
        position      : relative;
        width         : 2rem;
        height        : 0.5rem;
        margin        : 0;
        margin-right  : 0.2rem;
        line-height   : 0.5rem;
        font-size     : 0.3rem;
        color         : #04193c;
        text-align    : center;
        border-radius : 0.1rem;

        &.vote-btn {
          width      : 2.5rem;
          background : #98b2be;

          &.disabled {
            opacity : 0.5;
          }
        }
      }
    }
  }

}

.page-rule {

  .rule-area {
    position    : relative;
    width       : 6.3rem;
    margin      : 0.4rem auto;
    line-height : 0.5rem;
    font-size   : 0.32rem;
    color       : #04193c;
    text-align  : left;
    word-break  : break-all;
  }

  .feedback {
    position        : relative;
    width           : 2.04rem;
    height          : 0.72rem;
    margin          : 1rem auto 0.2rem;
    line-height     : 0.72rem;
    font-size       : 0.36rem;
    color           : #04193c;
    text-align      : center;
    text-decoration : underline;
  }
}

.btn.download-cover {
  display    : none;
  position   : fixed;
  z-index    : 150;
  left       : 0;
  right      : 0;
  top        : 0;
  bottom     : 0;
  background : rgba(0, 0, 0, 0.01);
}

.download-pop {
  display    : none;
  position   : fixed;
  z-index    : 200;
  left       : 0;
  right      : 0;
  top        : 0;
  bottom     : 0;

  .download-shadow {
    position   : absolute;
    left       : 0;
    right      : 0;
    top        : 0;
    bottom     : 0;
    background : rgba(0, 0, 0, 0.5);
  }

  .download-window {
    position    : absolute;
    width       : 6.9rem;
    height      : 4.77rem;
    left        : 50%;
    top         : 50%;
    margin-left : -3.45rem;
    margin-top  : -2.4rem;
    background  : url(../img/download-pop.png);
  }
}
